<template>
  <u-popup class="form-popup" mode="bottom" :show="show">
    <view style="width: 100%; height: 100vh; overflow-y: scroll">
			<u-form
			  :model="model"
			  :rules="rules"
			  ref="form"
			  labelPosition="top"
			  labelWidth="auto"
			  :labelStyle="{
			  	fontSize: '14px',
			  	color: '#B2B2B2',
			  	lineHight: '20px'
			  }"
			>
				<div class="basic-style">
					<div class="basic-title basic-border">基本信息</div>
					<u-form-item label="小组名称" prop="groupName" required>
						<u--input placeholder="请输入小组名称" v-model="model.groupName" :maxlength="30"></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u--textarea confirm-type="send" v-model="model.remark" :maxlength="200" placeholder="请输入备注"></u--textarea>
					</u-form-item>
				</div>
				<view class="space-x-1 px-1 btn_position">
				  <u-button @click="back" type="primary">返回</u-button>
					<u-button :disabled="isSubmit" type="primary" text="保存" @click="onDraft"></u-button>
				</view>
     </u-form>
    </view>
		<u-toast ref="uToast"></u-toast>
  </u-popup>
</template>

<script>
import { addGroup } from '@/api/index.js'
export default {
  name: 'addGroupPopup',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
		selectedPersonel: {
			type: Array,
			default: () => [],
		}
  },
	data() {
		return {
			model: {
				groupName: '',
				remark: ''
			},
			rules: {
				groupName: [{
					required: true,
					message: '请输入小组名称!',
					trigger: ['blur', 'change'],
				}, ],
			},
			isSubmit: false
		}
	},
	methods: {
		back(){
			this.$refs.form.resetFields()
			this.$emit('update:show', false)
		},
		validateForm() {
		  return this.$refs.form.validate().then(async () => {
		    return Promise.resolve()
		  })
		},
		async onDraft(){
			await this.validateForm()
			this.model.groupMembers = this.selectedPersonel.map(v => v.empId).join(',')
			this.isSubmit = true
			const that = this
			try {
			  const response = await addGroup({
			    ...this.model,
					groupType: 'personal'
			  })
			  if (response.success) {
			    this.$refs.uToast.show({
			      message: response.message,
			      type: 'default',
			      complete() {
			        that.isSubmit = false
			        that.$emit('update:show', false)
			      },
			    })
			  }
			} finally {
				// error
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import url('@/assets/inputStyle.scss');
.trip-form-data {
  ::v-deep {
    .u-form-item__body {
      padding-top: 2px;
      padding-bottom: 2px;
    }
  }
}
</style>
